<template>
	<view>
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<hx-navbar ref="hxnb" :config="config">
				<block slot="right">
					<view v-if="index != 1" class="edit" @tap="createAgroup()">
						创建
					</view>
					<view v-if="index == 1" class="edit" @tap="createAgroup()">
						邀请
					</view>
				</block>
			</hx-navbar>
			<view style="padding:20rpx 30rpx;">
				<view style="border-bottom:1rpx solid rgba(30,30,30,0.1);height: 105rpx;"
					class="flex  justify-between  justify-center align-center">
					<view class="flex align-center">
						<image src="../../static/search.png" mode="aspectFit"
							style="width: 39rpx;height:39rpx;margin-right: 20rpx;"></image>
						<input placeholder="请输入手机号/用户名模糊匹配" style="width: 428rpx;"
							placeholder-style="color:rgba(30,30,30,0.2)" v-model="value">
					</view>
					<view class="search" @click="souser">搜索</view>
				</view>
				<view class="flex justify-between align-center" style="margin-top:46rpx ;"
					v-for="(item,index) in tableData" :key="index">
					<view class="flex align-center">
						<u-avatar :src="item.image"></u-avatar>
						<view style="margin-left:10rpx ;font-size: 28rpx;">
							<view style="color: #1E1E1E;">{{item.userName}}
								<text
									style="color: #FFFFFF;margin-left: 20rpx;background-color:aquamarine;text-align: center;padding: 2rpx 5rpx;border-radius: 8rpx;">业主</text>
							</view>
							<view style="color: rgba(30,30,30,0.3);margin-top: 16rpx;">{{item.phone}}</view>
						</view>
					</view>
					<checkbox-group @change="checkboxChange(item)">
						<checkbox class="round" style="transform:scale(0.7)" :checked="item.checked" />
					</checkbox-group>
				</view>
				<view v-if="item.roleType != null" class="flex justify-between align-center" style="margin-top:46rpx;"
					v-for="(item,index) in tableData" :key="index">
					<view class="flex align-center">
						<u-avatar :src="item.roleImage"></u-avatar>
						<view style="margin-left:10rpx ;font-size: 28rpx;">
							<view style="color: #1E1E1E;">{{item.roleName}}
								<text
									style="color: #FFFFFF;margin-left: 20rpx;background-color:aquamarine;text-align: center;padding: 2rpx 5rpx;border-radius: 8rpx;"
									v-if="item.roleType == 4">业主</text>
								<text
									style="color: #FFFFFF;margin-left: 20rpx;background-color:aquamarine;text-align: center;padding: 2rpx 5rpx;border-radius: 8rpx;"
									v-if="item.roleType == 1">设计师</text>
								<text
									style="color: #FFFFFF;margin-left: 20rpx;background-color:aquamarine;text-align: center;padding: 2rpx 5rpx;border-radius: 8rpx;"
									v-if="item.roleType == 3">安装</text>
								<text
									style="color: #FFFFFF;margin-left: 20rpx;background-color:aquamarine;text-align: center;padding: 2rpx 5rpx;border-radius: 8rpx;"
									v-if="item.roleType == 2">工厂</text>
							</view>
							<view style="color: rgba(30,30,30,0.3);margin-top: 16rpx;">{{item.rolePhone}}</view>
						</view>
					</view>
					<checkbox-group @change="checkboxChange(item)">
						<checkbox class="round" style="transform:scale(0.7)" :checked="item.checked" />
					</checkbox-group>
					<!-- 			<image :src=" '/static/' + (indexType ==index ? 'check' : 'nocheck') + '.png'"
						@click="member(index)" style="height:30rpx;width:30rpx;margin-left: 10rpx;"></image> -->
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 标题栏配置
				config: {
					title: "",
					rightSlot: true,

				},
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				isAgree: false,
				value: '',
				tableData: [],
				indexType: null,
				checkboxValue1: [],
				index: '',
				groupNum: '',
				Id: ''
			}
		},
		onLoad(e) {
			this.config.title = e.title
			this.index = e.index
			this.groupNum = e.groupNum
		},
		onShow() {},
		methods: {
			checkboxChange(e) {
				this.checkboxValue1 = this.checkboxValue1.concat(e)
				this.Id = this.checkboxValue1[0].id
				console.log('芜湖', this.Id)
			},
			createAgroup() {
				if (this.index != 1) {
					if (this.checkboxValue1 == '') return this.$tools.showToast('群聊人员不能为空')
					if (this.checkboxValue1.length == 1) return this.$tools.showToast('群聊人员不能为1个')
					if (this.checkboxValue1.length > 1) {
						let data = {
							ids: JSON.stringify(this.checkboxValue1)
						}
						this.$api.createGroup(data).then((res) => {
							console.log(res, '现在创造性')
							if (res.data.code == 0) {
								this.$tools.showToast(res.data.result)
								uni.navigateTo({
									url: './chatPage'
								})
							} else {
								this.$tools.showToast(res.data.result)
							}
							uni.navigateBack(1);
						})
					}
				} else if (this.index == 1) {
					if (this.$cache.get('type') != 1) return this.$tools.showToast('只有群主能邀请人员')
					if (this.checkboxValue1 == '') return this.$tools.showToast('邀请人员不能为空')
					let data = {
						groupNum: this.groupNum,
						id: this.Id
					}
					this.$api.saveChat(data).then((res) => {
						uni.navigateBack({
							delta: 2
						});
					})
				}
			},
			souser() {
				if (this.value == '') return this.$tools.showToast('请选择搜索内容')
				this.chatSearch(1, 10)
			},
			chatSearch(num, size) {
				let phone = '';
				let name = '';
				let strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				if (strTemp.test(this.value)) {
					phone = this.value
				} else {
					name = this.value
				}
				let data = {
					pageNo: num,
					pageSize: size,
					phone,
					name
				}
				console.log(data, '色分色分');
				let zxcw = false
				this.$api.chatSearch(data).then((res) => {
					if (res.data.result.list == '') return this.$tools.showToast('参无此人')
					if (res) {
						res.data.result.list.forEach((item) => {
							this.tableData.forEach((res) => {
								if (item.phone == res.phone) zxcw = true
							})
							item.checked = false
						})
						console.log(res, '现在才醒在')
						if (zxcw == true) return this.$tools.showToast('已有数据')
						this.tableData = this.tableData.concat(res.data.result.list)

						this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
					} else {
						this.mescroll.endErr();
					}
					this.value = ''
				})
			},
			member(e) {
				this.indexType = e
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.chatSearch(e.num, e.size)
			},
		}
	}
</script>

<style scoped>
	.edit {
		background: #1E1E1E;
		opacity: 1;
		font-size: 32rpx;
		color: #FFFFFF;
		padding: 11rpx 70rpx;
		border-radius: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 15rpx;
	}

	.search {
		color: #1E1E1E;
		font-size: 32rpx;
		font-weight: 500;
		margin-right: 30rpx;
	}
</style>